<template>
	<div class="login_wrapper" v-loading="loading">
		<img class="bg" :src="loginBackground" />
		<el-card class="login_body">
			<template slot="header">
				<img :src="logoUrl" alt="" />
			</template>
			<el-form ref="loginForm" :rules="formRules" :model="loginForm">
				<el-form-item prop="account">
					<el-input prefix-icon="el-icon-sw-user" v-model="loginForm.account" @keyup.enter.native="handleSubmitLogin"></el-input>
				</el-form-item>
				<el-form-item prop="password">
					<el-input prefix-icon="el-icon-sw-pass" show-password v-model="loginForm.password" @keyup.enter.native="handleSubmitLogin"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button class="forget" type="text" @click="handleForgetPass">忘记密码</el-button>
					<el-checkbox v-model="loginForm.isRemember">记住密码</el-checkbox>
				</el-form-item>
				<el-form-item><el-button class="login" type="primary" @click="handleSubmitLogin" :loading="btnLoading">登录</el-button></el-form-item>
			</el-form>
			<div class="buttons">
				<el-button type="text" icon="el-icon-arrow-left" @click="handleReturnIndex">返回首页</el-button>
				<p><el-button type="text" @click="handleToRegister">新用户注册</el-button></p>
			</div>
		</el-card>
	</div>
</template>

<script>
import SparkMD5 from 'spark-md5';
import { mapGetters } from 'vuex';
import { login, addUserInfo } from '@/api/login';
export default {
	data() {
		return {
			loading: false,
			loginForm: { account: '', password: '' },
			formRules: {
				account: [{ required: true, message: '请输入用户账号', trigger: 'blur' }],
				password: [{ required: true, message: '请输入用户密码', trigger: 'blur' }]
			},
			btnLoading: false
		};
	},
	computed: {
		...mapGetters(['siteInfo']),
		logoUrl() {
			console.log(SparkMD5.hash('v123456' + this.md5Key).toUpperCase());
			return !this.siteInfo.logo ? require('@/assets/img/head_logo.png') : this.siteInfo.logo.httpUrl;
		},
		loginBackground() {
			return !this.siteInfo.loginBg ? require('@/assets/img/head_logo.png') : this.siteInfo.loginBg.httpUrl;
		},
		isRedirect() {
			return this.$route.query.redirect;
		}
	},
	methods: {
		//提交登陆
		handleSubmitLogin() {
			this.$refs['loginForm'].validate(vail => {
				if (!vail) return false;
				this.btnLoading = true;
				this.loginRequest(this.loginForm);
			});
		},

		//登录请求
		async loginRequest(data) {
			let params = { ...data, password: SparkMD5.hash(data.password + this.md5Key).toUpperCase() };
			let result = await login(params).then(res => res);
			this.btnLoading = false;
			if (result.data.code === 0) {
				let datas = result.data.data[0];
				console.log(result.data);
				this.$local.set('token', result.headers['authorization']);
				this.$local.set('userInfo', result.data.data[0]);
				addUserInfo(result.data.data[0].id);
				this.$message.success('登陆成功');
				this.$refs['loginForm'].resetFields();
				if (!this.isRedirect) {
					this.$router.replace('/index');
				} else {
					this.$router.replace(this.isRedirect);
				}
			}
		},

		//返回首页
		handleReturnIndex() {
			this.$router.replace('/index');
		},

		//去注册
		handleToRegister() {
			this.$router.replace('/register');
		},

		//忘记密码
		handleForgetPass() {
			console.log('忘记密码');
		}
	}
};
</script>

<style lang="scss" scoped>
.login_wrapper {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100vw;
	height: 100vh;
	position: relative;
	img.bg {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		content: '';
		z-index: 1;
		object-fit: cover;
	}
}
.login_body ::v-deep {
	position: relative;
	width: 400px;
	z-index: 2;
	background-color: rgba(255, 255, 255, 0.95);
	box-shadow: 0 0 100px rgba(0, 0, 0, 0.1);
	.el-card__header {
		display: flex;
		align-items: center;
		justify-content: center;
		border-bottom: none;
		padding: 20px 0 0;
		img {
			height: 40px;
		}
	}
	.el-card__body {
		padding: 20px 40px 20px;
	}
	.el-checkbox__input {
		&.is-focus .el-checkbox__inner {
			border-color: #357c65;
		}
		&.is-checked .el-checkbox__inner {
			border-color: #357c65;
			background-color: #357c65;
		}
	}
	.el-checkbox__label {
		color: #666;
	}
	.el-form {
		.el-button.login {
			width: 100%;
			font-size: 18px;
			border-color: #357c65;
			background-color: #357c65;
		}
		.el-button.forget {
			float: right;
			padding: 0;
			color: #357c65;
			margin-top: 12px;
		}
	}
	.buttons {
		display: flex;
		align-items: center;
		justify-content: space-between;
		p {
			display: flex;
			align-items: center;
			line-height: 1;
		}
		.el-button {
			padding: 0;
			color: #357c65;
		}
	}
}
</style>
